<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="商品编码" prop="likeGoodsId">
        <el-input
          v-model="queryParams.likeGoodsId"
          placeholder="请输入商品编码"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="收货编号" prop="collectId">
        <el-input
          v-model="queryParams.collectId"
          placeholder="请输入收货编号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="商品型号" prop="goodsName">
        <el-input
          v-model="queryParams.goodsName"
          placeholder="请输入商品型号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="商品规格" prop="printing">
        <el-input
          v-model="queryParams.printing"
          placeholder="请输入商品规格"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="商品串号" prop="goodsSn">
        <el-input
          v-model="queryParams.goodsSn"
          placeholder="请输入商品串号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="回收价格" prop="costPrice">
        <el-input
          v-model="queryParams.costPrice"
          placeholder="请输入回收价格"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="预售价格" prop="retailPrice">
        <el-input
          v-model="queryParams.retailPrice"
          placeholder="请输入预售价格"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
<!--      <el-form-item label="仓库" prop="stockId">
        <el-select v-model="queryParams.stockId" clearable size="small">
          <el-option
            v-for="stock in stockList"
            :label="stock.stockName"
            :value="stock.stockId"
          />
        </el-select>
      </el-form-item>-->

      <el-form-item label="流程步骤" prop="goodsStep">
        <el-select v-model="queryParams.goodsStep" placeholder="请选择流程步骤" clearable size="small">
          <el-option label="待验机" :value="1" />
          <el-option label="待报价" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="商品状态" prop="goodsStatus">
        <el-select v-model="queryParams.goodsStatus" placeholder="请选择商品状态" clearable size="small">
          <el-option v-for="item in goodsStatusOptions" :value="item.v" :label="item.l" />
        </el-select>
      </el-form-item>
      <el-form-item label="报价师" prop="offerName">
        <el-input
          v-model="queryParams.offerName"
          placeholder="请输入报价师"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="验机人" prop="testName">
        <el-input
          v-model="queryParams.testName"
          placeholder="请输入验机人"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="验机时间">
        <el-date-picker
          size="small"
          v-model="testTimeRange"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :unlink-panels="true"
          @change="testTimeChange"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          size="small"
          v-model="createTimeRange"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :unlink-panels="true"
          @change="createTimeChange"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="价格区间">
        <el-input type="number" @change="minPriceChange" size="small"
                  v-model="queryParams.minPrice"
                  placeholder="最小价格" style="width: 120px;" />
        -
        <el-input type="number" @change="maxPriceChange" size="small"
                  v-model="queryParams.maxPrice"
                  placeholder="最大价格" style="width: 120px;" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-printer"
          size="mini"
          :disabled="multiple"
          @click="handlePrinting"
        >打印</el-button>
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['recovery:goods:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table border v-loading="loading" :data="goodsList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" fixed="left" />
      <el-table-column label="回收编号" align="center" prop="collectId" fixed="left" />
      <el-table-column label="商品编码" align="center" prop="goodsId" width="180" fixed="left" />
      <el-table-column label="商品型号" align="center" width="180" prop="goodsName" show-overflow-tooltip>
        <template v-slot="scope">
          <div v-if="scope.row.goodsName">{{scope.row.goodsName}}</div>
          <div v-else style="color: red;font-weight: bold">需要质检</div>
        </template>
      </el-table-column>
      <el-table-column label="规格" align="center" prop="printing" show-overflow-tooltip width="180" />
      <el-table-column label="商品串号" align="center" prop="goodsSn" width="220" />
      <el-table-column label="成色" align="center" prop="fineness" />
      <el-table-column label="回收价格" align="center" prop="costPrice" width="120">
        <template v-slot="scope">
          <div v-if="scope.row.costPrice">
            <el-tag v-if="scope.row['costOpen'] === true">{{scope.row.costPrice}}</el-tag>
            <el-tag v-else type="info" @click="clickCostOpen(scope.row)">****</el-tag>
          </div>
          <div v-else style="color: red;font-weight: bold">暂无报价</div>

        </template>
      </el-table-column>
<!--      <el-table-column label="预售价格" align="center" prop="retailPrice" width="120" />-->
      <el-table-column label="仓库" align="center" prop="stockId"  :formatter="stockFormatter" width="200"/>
      <el-table-column label="仓位" align="center" prop="locationStr" width="120"/>
      <el-table-column label="报价师" align="center" prop="offerName" width="120" />
      <el-table-column label="验机人" align="center" prop="testName" width="120">
        <template v-slot="scope">
          <div v-if="scope.row.testName">{{scope.row.testName}}</div>
          <div v-else style="color: red;font-weight: bold">暂无验机</div>
        </template>
      </el-table-column>
      <el-table-column label="验机时间" align="center" prop="testTime" width="180" />
      <el-table-column label="商品状态" align="center" prop="goodsStatus" width="120">
        <template v-slot="scope">
          <el-tag v-for="item in goodsStatusOptions" :type="item.t" v-show="scope.row.goodsStatus === item.v">{{item.l}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="120">
        <template v-slot="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark" width="180" show-overflow-tooltip />
<!--      <el-table-column label="打款" align="center" width="120">
        <template v-slot="scope">
          <el-tag size="mini" v-if="scope.row.hasPay === 1" type="info">已打款</el-tag>
        </template>
      </el-table-column>-->
      <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="160">
        <template v-slot="scope">
          <el-button size="mini" type="text" @click="handleDetail(scope.row)">详情</el-button>
          <el-button size="mini" type="text" @click="handleObligation(scope.row)" v-hasPermi="['recovery:goods:pz']">判责</el-button>
          <el-button v-if="scope.row.goodsStatus === 1"
            size="mini"
            type="text"
            @click="handleGoodsStatus(scope.row, 4)"
            v-hasPermi="['recovery:goods:zf']"
          >作废</el-button>
          <el-button
            v-if="scope.row.goodsStatus === 4"
            size="mini"
            type="text"
            @click="handleDelete(scope.row)"
            v-hasPermi="['recovery:goods:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog :visible.sync="open" :title="title" width="80%" append-to-body @close="goodsDetailCancel">
      <goods-detail :prop-goods-id="selGoodsId" />
    </el-dialog>

    <obligation-form :title="judgeObj.title" :open="judgeObj.open" :goods-info="judgeObj.goodsInfo"  @close="closeFlush" />
  </div>
</template>

<script>
import { listGoods, exportGoods, updateGoods, delGoods } from "@/api/recovery/goods";

import {listStock} from "@/api/recovery/stock"
import priceLog from "@/views/recovery/goods/price-log";
import GoodsDetail from "@/views/recovery/goods/componets/goods-detail.vue";
import ObligationForm from "@/views/other/obligation/components/obligation-form.vue";
export default {
  name: "Goods",
  components: {
    ObligationForm,
    priceLog, GoodsDetail
  },
  data() {
    return {
      judgeObj: {
        open: false,
        title: undefined,
        goodsInfo: undefined
      },
      goodsStatusOptions: [
        {v: 1, l: '正常', t:''},
        {v: 2, l: '借出中', t:'warning'},
        {v: 3, l: '丢失', t:'danger'},
        {v: 4, l: '作废', t:'info'},
        {v: 5, l: '售出', t:'success'},
      ],
      selGoodsId: undefined,
      updateOpen: false,
      /*报价师列表*/
      offerNameOptions: [],
      /*门店回收列表*/
      storeList:[],
      //创建时间
      createTimeRange: [],
      //验机时间
      testTimeRange: [],
      // 仓库列表
      stockList: [],
      //相关步骤日志
      stepLogList: [],
      //详情信息
      searchGoods: null,
      // 用户列表
      userList: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 回收商品管理表格数据
      goodsList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        goodsId: null,
        likeGoodsId: null,
        collectId: null,
        goodsName: null,
        goodsSn: null,
        costPrice: null,
        retailPrice: null,
        stockId: null,
        goodsStep: null,
        confirmStatus: null,
        goodsStatus: null,
        testUserId: null,
        params: {},
        minPrice: null,
        maxPrice: null,
        printing: null,
        mount: null,
        testName: null,
        offerName: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },

      //平台
      platformOptions: [],
    };
  },
  created() {
    this.getList();
    this.getStockList();
    this.getDicts("dayu_offer_teach").then(response => {
      this.offerNameOptions = response.data;
    });

    this.getDicts("sale_price_log_platform").then(response => {
      this.platformOptions = response.data;
    });
  },
  methods: {
    closeFlush() {
      this.judgeObj.open = false;
      this.judgeObj.title = undefined;
      this.judgeObj.goodsInfo = undefined;
    },
    handleObligation(row) {
      this.judgeObj.open = true;
      this.judgeObj.title = row.goodsId + " 新增判责信息";
      this.judgeObj.goodsInfo = row;
    },
    handleDetail(row) {
      this.open = true;
      this.title = row.goodsId + " 商品详情";
      this.selGoodsId = row.goodsId;
    },
    goodsDetailCancel() {
      this.open = false;
      this.selGoodsId = undefined;
    },
    /*标记打款*/
    handleHasPay(row) {
      this.$confirm("确定已经标记编号：" + row.goodsId + " 为已打款?", "警告", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$set(row, "hasPay", 1);
        return updateGoods(row);
      }).then(res => {
        this.getList();
        this.msgSuccess("操作成功！");
      })
    },
    clickCostOpen(row) {
      this.goodsList.forEach(it => {
        this.$set(it, "costOpen", false);
      })
      this.$set(row, "costOpen", true);
    },

    /*最小价格 change事件*/
    minPriceChange(e) {
      this.$set(this.queryParams.params, "minPrice", this.queryParams.minPrice);
    },
    /*最大价格区间*/
    maxPriceChange(e) {
      if(e < this.queryParams.minPrice) {
        this.queryParams.maxPrice = null;
        this.msgError("不能小于最小价格！")
        return
      }
      this.$set(this.queryParams.params, "maxPrice", this.queryParams.maxPrice);
    },

    //验机时间
    testTimeChange(e) {
      if(e == null) {
        this.$delete(this.queryParams.params, 'testStartTime');
        this.$delete(this.queryParams.params, 'testEndTime');
        return
      }
      this.$set(this.queryParams.params, 'testStartTime', e[0]);
      this.$set(this.queryParams.params, 'testEndTime', e[1]);
    },

    /** 创建时间选项*/
    createTimeChange(e) {
      if(e == null) {
        this.$delete(this.queryParams.params, 'createStartTime');
        this.$delete(this.queryParams.params, 'createEndTime');
        return
      }
      this.$set(this.queryParams.params, 'createStartTime', e[0]);
      this.$set(this.queryParams.params, 'createEndTime', e[1]);
    },
    /** 打印按钮 */
    handlePrinting() {
      const url = this.$router.resolve({path: '/printing', query : {goodsIds: this.ids}})
      window.open(url.href, '_blank')
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.goodsId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /**状态修改*/
    handleGoodsStatus(row, status) {
      this.$prompt("确定作废数据吗?","警告", {
        confirmButtonText: "确定",
        cancelButtonText: "关闭",
        inputPlaceholder:'请输入作废原因',
        type : "warning"
      }).then(({value}) => {
        let data = {
          goodsId: row.goodsId,
          goodsStatus: status,
          remark: value,
          updateStatus: 3
        }
        return updateGoods(data);
      }).then(resp => {
        this.msgSuccess("操作成功！");
        this.getList();
      })
    },
    /** 库存格式 */
    stockFormatter(row, column, collValue) {
      for (let i = 0; i < this.stockList.length; i++) {
        if(collValue === this.stockList[i].stockId) {
          return this.stockList[i].stockName;
        }
      }
    },
    /**获取仓库列表*/
    getStockList() {
      listStock({}).then(resp => {
        this.stockList = resp.rows;
      })
    },
    /** 查询回收商品管理列表 */
    getList() {
      this.loading = true;
      listGoods(this.queryParams).then(response => {
        this.goodsList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.createTimeRange = [];
      this.testTimeRange = [];
      this.createTimeChange(null);
      this.testTimeChange(null);
      this.resetForm("queryForm");
      this.queryParams.minPrice = null;
      this.queryParams.maxPrice = null;
      this.$delete(this.queryParams.params, "minPrice");
      this.$delete(this.queryParams.params, "maxPrice");
      this.handleQuery();
    },
    /** 删除*/
    handleDelete(row) {
      this.$confirm('确定删除这条数据吗？删除后将不能恢复', '警告', {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return delGoods(row.goodsId);
      }).then(resp => {
        this.msgSuccess("删除成功！");
        this.getList();
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有回收商品管理数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return exportGoods(queryParams);
        }).then(response => {
          this.download(response.msg);
        })
    }
  }
};
</script>

<style>
.table-row {
  white-space: nowrap;
  overflow: hidden;
}
</style>
